<template>
  <div class="recipe-order-in-tab">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form :inline="true">
        <el-form-item>
          <sn8-select @change="sn8Changed"/>
        </el-form-item>

        <el-form-item>
          <el-select
            class="tab-select"
            @change="tabChanged"
            clearable
            filterable
            remote
            :remote-method="loadTabs"
            :placeholder="$t('mike.recipe_tab')"
            v-model="tabIndex"
          >
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in tabs"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table
        :data="dataList"
        border
        style="width: 100%;"
        v-loading="dataListLoading"
      >
        <el-table-column
          :label="$t('mike.img')"
          align="center"
          header-align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div
              class="text-center is-align-middle is-justify-center el-row--flex"
            >
              <midea-admin-image
                :height="60"
                :previewable="true"
                :url="scope.row.picUrl"
                :width="60"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('model.name')"
          align="center"
          header-align="center"
          prop="name"
        />

        <el-table-column
          :label="$t('menu.sort')"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <div
              @click="clickOnEditSort(scope.row)"
              class="banner-sort common-table-sort-edit"
            >
              <span>{{ scope.row.current_sort }}</span>
              <!--              <span v-if="tabIndex === '1'">{{ scope.row.order1Tab }}</span>-->
              <!--              <span v-if="tabIndex === '2'">{{ scope.row.order2Tab }}</span>-->
              <!--              <span v-if="tabIndex === '3'">{{ scope.row.order3Tab }}</span>-->
              <!--              <span v-if="tabIndex === '4'">{{ scope.row.order4Tab }}</span>-->
              <!--              <span v-if="tabIndex === '5'">{{ scope.row.order5Tab }}</span>-->
              <!--              <span v-if="tabIndex === '6'">{{ scope.row.order6Tab }}</span>-->
              <!--              <span v-if="tabIndex === '7'">{{ scope.row.order7Tab }}</span>-->

              <i class="el-icon-edit-outline"/>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="pageCurrentChangeHandle"
        @size-change="pageSizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
      />

      <order-in-tab-sort-edit
        ref="sortEdit"
        @refreshDataList="getDataList"
        v-if="sortEditVisible"
      />
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import Sn8Select from '../../../components/sn8.select'
import OrderInTabSortEdit from './order-in-tab.sortEdit'
export default {
  name: 'OrderInTab',
  components: { OrderInTabSortEdit, Sn8Select },
  mixins: [mixinViewModule],
  data () {
    return {
      tabs: [],
      requesting: false,
      activatedIsNeed: true,
      sortEditVisible: false,
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/order/foodmenu/gettabmenus/{tabIndex}',
        getDataListIsPage: true
        // deleteURL: '/midea/menu/piclink/del/'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      tabIndex: '',
      sn8: ''
    }
  },
  mounted () {},
  methods: {
    sn8Changed (sn8) {
      this.sn8 = sn8
      this.tabs = []
      this.tabIndex = ''
      this.loadTabs()
      this.reload()
    },
    tabChanged () {
      this.reload()
    },
    reload () {
      if (!this.tabIndex || this.tabIndex.length <= 0) {
        // clean data
        this.dataList = []
        return
      }

      // let splited = this.tabIndex.split('-')
      this.mixinViewModuleOptions.getDataListURL = `/midea/menu/order/foodmenu/gettabmenus/${this.tabIndex}`
      this.getDataList()
    },
    handleResponseListData (data) {
      let splited = this.tabIndex.split('-')
      let realIdx = splited[splited.length - 1]

      data = data.map(item => {
        item.current_sort = item[`order${realIdx}Tab`]
        return item
      })

      return data
    },
    loadTabs () {
      this.$http
        .post(
          `${this.mikeNetworkBase}/home/midea/menu/listall/alltabs/${this.sn8}`,
          {}
        )
        .then(({ data: res }) => {
          if (res.code !== 200) {
            this.tabs = []
            return
          }

          let list = res.data.filter(item => {
            return item.id !== '1001'
          })

          this.tabs = list.map(item => {
            return { value: item.id, label: item.name }
          })
        })
    },
    clickOnEditSort (model) {
      this.sortEditVisible = true
      this.$nextTick(() => {
        let splited = this.tabIndex.split('-')
        let realIdx = splited[splited.length - 1]
        let url = `/midea/menu/order/foodmenu/set/${realIdx}/${model.id}/{index}`
        // switch (model.showTypes) {
        //   case MikeBannerType.Recipe:
        //     url = 'midea/menu/collection/content/menu/recommendSort/{id}/{sort}'
        //     break
        //   case MikeBannerType.Collection:
        //     url = 'midea/menu/collection/content/collections/recommendSort/{id}/{sort}'
        //     break
        //   case MikeBannerType.Activity:
        //     url = 'midea/menu/piclink/set/recommend/{sort}/{id}'
        //     break
        //   default:
        //     break
        // }

        this.$refs.sortEdit.requestUrl = url
        this.$refs.sortEdit.form.name = model.name
        this.$refs.sortEdit.form.id = model.id
        this.$refs.sortEdit.form.tabIndex = realIdx
        this.$refs.sortEdit.form.value = model.current_sort // model[`order${this.tabIndex}Tab`]

        this.$refs.sortEdit.init()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.recipe-order-in-tab {
}
</style>
